<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>用户列表页</title>
	<#include "../layout/stylesandscripts.ftl">

    <style type="text/css">
        .imgDiv {
            display: inline-block;
            position: relative;
        }

        .imgDiv .delete {
            position: absolute;
            top: 0px;
            right: 0px;
            width: 25px;
            height: 25px;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <#include "../layout/header.ftl">

    <#include "../layout/menu_navigation.ftl">

	<div class="layui-body">
		<!-- 内容主体区域 -->
		<div style="padding: 15px;">
			<span class="layui-breadcrumb">
  				<a href="">用户管理</a>
  				<a><cite>用户列表</cite></a>
			</span>

			<blockquote class="layui-elem-quote" style="margin-top: 15px">
				<form class="layui-form layui-form-pane" action="" id="searchForm">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">顾客姓名</label>
							<div class="layui-input-inline">
                                <select name="customerId" id="customerIdSearch">
                                    <option value=""></option>
									<#list customers as customer>
										<option value="${customer.id}">${customer.customerName}</option>
									</#list>
                                </select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">日期</label>
							<div class="layui-input-inline">
								<input type="text" name="date" id="dateSearch" placeholder="请输入日期" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">跟进日期</label>
							<div class="layui-input-inline">
								<input type="text" name="commissionDate" id="commissionDateSearch" placeholder="请输入跟进日期" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<button class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i>查询</button>
						</div>
					</div>
				</form>
			</blockquote>

			<#--<blockquote class="layui-elem-quote">
				<div class="layui-btn-group">
					<button class="layui-btn layui-btn-small" id="add"><i class="layui-icon">&#xe654;</i>增加</button>
					<button class="layui-btn layui-btn-small layui-btn-danger" id="delUser"><i class="layui-icon">&#xe640;</i>删除</button>
					<button class="layui-btn layui-btn-small layui-btn-normal" id="refresh"><i class="layui-icon">&#xe669;</i>刷新</button>
				</div>
			</blockquote>-->

			<table class="layui-table" lay-filter="customerArchivesTable" lay-data="{height:600,page:true,id:'customerArchives',url:'/customerArchives/data',toolbar:'#toolbarCustomerArchives'}">
				<thead>
				<tr>
					<th lay-data="{type:'checkbox'}"></th><!-- LAY_CHECKED:true 设置所有的复选框默认选中 -->
					<th lay-data="{type:'numbers'}">序号</th>
					<th lay-data="{field:'customerName', width:160}">顾客姓名</th>
					<th lay-data="{field:'date', width:160}">日期</th>
					<th lay-data="{field:'commissionDate', width:160}">跟进日期</th>
					<th lay-data="{field:'healthState', width:200}">皮肤/健康</th>
					<th lay-data="{field:'businessState', width:200}">事业/经济</th>
                    <th lay-data="{field:'homeState', width:200}">家庭状况</th>
                    <th lay-data="{field:'matchingProducts', width:200}">搭配产品</th>
					<th lay-data="{field:'comment', width:250}">备注</th>
					<th lay-data="{title:'操作',fixed: 'right', width:180, align:'center', toolbar: '#bar'}"></th>
				</tr>
				</thead>
			</table>
		</div>
	</div>
    <#include "../layout/footer.ftl">
</div>




<script>
    function preview(a) {
        var src=$(a).attr('src');
        //页面层
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['1300', '700px'], //宽高
            title:['预览','font-size:24px;'],
            content: '<img src="'+src+'"/>'
        });
    }

    //JavaScript代码区域
    layui.use(['element','table','form','laydate'], function(){
        var element = layui.element;
        var table=layui.table;
		var form=layui.form;
		var laydate=layui.laydate;
//		var upload=layui.upload;

//		var now=new Date();
//		console.log(util.toDateString(now));
        /*var uploadInst = upload.render({
            elem: '#upload',
			url: '/file/upload',
//			auto:false,
//            bindAction:'#upload_img',
            field:'file',
            before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#preview').attr('src', result); //图片链接（base64）
                });

                /!*var uploadText = $('#uploadText');
                uploadText.html('<a class="layui-btn layui-btn-mini upload_img">上传</a>');
                uploadText.find('.upload_img').on('click', function(){
                    uploadInst.upload();
                });*!/
            },
			done: function(res){
                if(res.code == 200){
                    return layer.msg('上传成功');
                }
            },
			error: function(){
                //演示失败状态，并实现重传
                var uploadText = $('#uploadText');
                uploadText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini reload">重试</a>');
                uploadText.find('.reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });*/

//		console.log($("#searchForm").serializeObject(true));

		form.on('submit(search)',function (data){
//		    console.log($("#searchForm").serializeObject(true));
            table.reload('customerArchives', {
                where:$("#searchForm").serializeObject(false),
            });
            return false;
        });

		laydate.render({
			elem:'#dateSearch'
		});

        laydate.render({
            elem: '#date' //指定元素
        });

        laydate.render({
            elem: '#commissionDate' //指定元素
        });

        laydate.render({
            elem: '#commissionDateSearch' //指定元素
        });

        //监听工具条
        var addFormIndex;
        table.on('tool(customerArchivesTable)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.msg('查看操作');
            } else if(layEvent === 'del'){
                layer.confirm('确定要删除?', {icon: 3, title:'提示'}, function(index){
                    $.get('/customerArchives/del',{ids:data.id},function (data) {
						if(data.code==200){
                            layer.alert(data.msg,{icon: 1},function(index){
                                layer.close(index);
                                table.reload('customerArchives', {
                                    where:$("#searchForm").serializeObject(false),
                                });
                            });
						}
                    },"json");
                    layer.close(index);
                });
            } else if(layEvent === 'edit'){
//                layer.msg('编辑操作');
                $.get('/customerArchives/findOne',{id:data.id},function(res){
                    var crmCustomerArchives=res.data.crmCustomerArchives;
                    console.log(crmCustomerArchives);
                    $('#id').val(crmCustomerArchives.id);
                    $('#date').val(crmCustomerArchives.date);
                    $('#commissionDate').val(crmCustomerArchives.commissionDate);
                    $('#healthState').val(crmCustomerArchives.healthState);
                    $('#skinCondition').val(crmCustomerArchives.skinCondition);
                    $('#businessState').val(crmCustomerArchives.businessState);
                    $('#matchingProducts').val(crmCustomerArchives.matchingProducts);
                    $('#comment').val(crmCustomerArchives.comment);
                    $('#customerId').val(crmCustomerArchives.customerId);
                    var html="";
                    var fileName="";
                    $.each(crmCustomerArchives.files,function (index,element) {
                        html += '<div class="imgDiv">'+
                                '<img src="'+ element.fileUrl +'" alt="'+ element.fileOriginName +'" class="layui-upload-img" width="150px;" height="150px;" onclick="preview(this)">' +
                                '<a href="javascript:;" onclick="deleteFile(this)">'+
                                '   <img src="/static/img/button-cross.png" class="delete"/>'+
                                '</a>'+
                                '</div>';
                        if( index=== (crmCustomerArchives.files.length-1)){
                            fileName += element.fileOriginName;
                        }
                        else{
                            fileName += element.fileOriginName+",";
                        }
                    });
                    $('#archivesPreview').html(html);
                    $('#archivesFileId').val(crmCustomerArchives.fileId);
                    $('#archivesFileName').val(fileName);
                    form.render();
                },"json");
                addFormIndex=layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['600px', '700px'], //宽高
                    content:$('#addForm'),
//                    title:'编辑页',
                    title:['编辑页','font-size:24px;'],
                    skin:'layui-layer-molv'
                });
            }
        });

        $('#add').click(function () {
            $('#id').val("");
            $('#date').val("");
            $('#customerId').val("");
            $('#addForm textarea').each(function (i,n) {
                $(n).val("");
            });

            form.render();

            addFormIndex=layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['600px', '700px'], //宽高
                content:$('#addForm'),
				title:['编辑页','font-size:24px;'],
				skin:'layui-layer-molv'
            });
        });

        $('#refresh').click(function () {
//            console.log($("#searchForm").serializeObject(true));
            table.reload('customerArchives',{
                url: '/customerArchives/data',
                where:$("#searchForm").serializeObject(false)
			});
        });

        form.verify({
            password: [/^[\S]{6,12}$/,'密码必须6到12位，且不能出现空格']
		});

        form.on('switch(switch)', function(data){
            console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.elem.checked); //开关是否开启，true或者false
            console.log(data.value); //开关value值，也可以通过data.elem.value得到
            console.log(data.othis); //得到美化后的DOM对象
			console.log($(data.elem).data('id'));


			$.post('/user/changeStatus',{id:$(data.elem).data('id'),checked:data.elem.checked},function (res) {
				layer.msg(res.msg);
            },"json");
        });

        form.on('submit(addSubmit)',function (data){
            /*$.post('/user/addOrUpdate',$('#addForm').serializeObject(true),function (data) {
                if(data.code==200){
                    layer.alert(data.msg,{icon: 1},function(index){
                        layer.close(index);
                        layer.close(addFormIndex);
                        table.reload('user', {
                            where:$("#searchForm").serializeObject(true),
                        });
                    });
                }
            },"json");*/
            var obj=$('#addForm').serializeObject(true);
//            console.log(obj);

            $.ajax({
				type:'POST',
				url:'/customerArchives/addOrUpdate',
				data:obj,
				dataType:'json',
				beforeSend:function(){
                    $('#addSubmit').text("提交中...");
                    $('#addSubmit').attr("disabled",true);
				},
				success:function (data) {
				    if(data.code<0){
						layer.alert(data.msg,{icon:7});
					}
                    else{
				        if(data.code==200){//成功
                            layer.alert(data.msg,{icon: 1},function(index){
                                layer.close(index);
                                layer.close(addFormIndex);
                                table.reload('customerArchives', {
                                    where:$("#searchForm").serializeObject(false),
                                });
                            });
                        }
                        else if(data.code==500){//失败
                            layer.alert("系统错误,请重新尝试",{icon:2});
                        }
                    }
                },
				error:function (XMLHttpRequest, textStatus, errorThrown) {
//					console.log(XMLHttpRequest);
//					console.log(textStatus);
//					console.log(errorThrown);
					layer.alert('系统错误,请联系管理员',{icon:2});
                },
                complete:function(){
                    $('#addSubmit').text("立即提交");
                    $('#addSubmit').attr("disabled",false);
				}
			});

            return false;
        });

        $('#delUser').click(function () {
            var checkStatus = table.checkStatus('customerArchives'); //user即为基础参数id对应的值

            console.log(checkStatus.data); //获取选中行的数据
            console.log(checkStatus.data.length); //获取选中行数量，可作为是否有选中行的条件
            console.log(checkStatus.isAll ); //表格是否全选

			if(checkStatus.data.length==0){
				layer.alert("请至少选中一行",{icon:7});
				return;
			}

			var ids="";
			$.each(checkStatus.data,function (i,n){
				if(i==(checkStatus.data.length-1)){
                    ids +=n.id;
				}
				else{
                    ids +=n.id+",";
				}
            });

            layer.confirm('确定要删除?', {icon: 3, title:'提示'}, function(index){
                $.get('/customerArchives/del',{ids:ids},function (data) {
                    if(data.code==200){
                        layer.alert(data.msg,{icon: 1},function(index){
                            layer.close(index);
                            table.reload('customerArchives', {
                                where:$("#searchForm").serializeObject(false),
                            });
                        });
                    }
                },"json");
                layer.close(index);
            });
        });
    });
</script>

<script type="text/html" id="toolbarCustomerArchives">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" id="add"><i class="layui-icon">&#xe654;</i>增加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" id="delUser"><i class="layui-icon">&#xe640;</i>删除</button>
        <button class="layui-btn layui-btn-sm layui-btn-normal" id="refresh"><i class="layui-icon">&#xe669;</i>刷新</button>
    </div>
</script>

<script type="text/html" id="bar">
	<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>

<script type="text/html" id="birthdateTpl">
	{{# var fn= function(){ return Format(d.birthdate,"yyyy-MM-dd"); }; }}

	{{ fn() }}
</script>

<script type="text/html" id="createTimeTpl">
	{{# var fn= function(){ return Format(d.createTime,"yyyy-MM-dd HH:mm:ss"); }; }}

	{{ fn() }}
</script>

<script type="text/html" id="updateTimeTpl">
	{{# var fn= function(){ return Format(d.updateTime,"yyyy-MM-dd HH:mm:ss"); }; }}

	{{ fn() }}
</script>

<script type="text/html" id="statusTpl">
	{{# if(d.status==0){ }}
		<input type="checkbox" name="switch" data-id="{{ d.id }}" lay-filter="switch" lay-skin="switch" lay-text="ON|OFF" checked>
	{{# }else{ }}
		<input type="checkbox" name="switch" data-id="{{ d.id }}" lay-filter="switch" lay-skin="switch" lay-text="ON|OFF">
	{{# } }}
</script>
</body>


<form class="layui-form layui-form-pane" id="addForm" style="display: none">
	<input type="hidden" name="id" id="id">
    <div class="layui-form-item">
        <label class="layui-form-label">顾客</label>
        <div class="layui-input-block">
            <select name="customerId" id="customerId">
                <option value=""></option>
				<#list customers as customer>
					<option value="${customer.id}">${customer.customerName}</option>
				</#list>
            </select>
        </div>
    </div>
	<div class="layui-form-item">
		<label class="layui-form-label">日期</label>
		<div class="layui-input-block">
			<input type="text" name="date" id="date" lay-verify="date" placeholder="请输入日期" autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">跟进日期</label>
		<div class="layui-input-block">
			<input type="text" name="commissionDate" id="commissionDate" lay-verify="date" placeholder="请输入跟进日期" autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item" pane>
		<label class="layui-form-label">皮肤/健康</label>
		<div class="layui-input-block">
            <textarea id="healthState" name="healthState" placeholder="请输入皮肤/健康" class="layui-textarea"></textarea>
		</div>
	</div>
	<#--<div class="layui-form-item" pane>
		<label class="layui-form-label">皮肤状况</label>
		<div class="layui-input-block">
            <textarea id="skinCondition" name="skinCondition" placeholder="请输入皮肤状况" class="layui-textarea"></textarea>
		</div>
	</div>-->
	<div class="layui-form-item" pane>
		<label class="layui-form-label">事业/经济</label>
		<div class="layui-input-block">
            <textarea id="businessState" name="businessState" placeholder="请输入事业/经济" class="layui-textarea"></textarea>
		</div>
	</div>
	<div class="layui-form-item" pane>
		<label class="layui-form-label">家庭状况</label>
		<div class="layui-input-block">
            <textarea id="homeState" name="homeState" placeholder="请输入家庭状况" class="layui-textarea"></textarea>
		</div>
	</div>
	<div class="layui-form-item" pane>
		<label class="layui-form-label">搭配产品</label>
		<div class="layui-input-block">
            <textarea id="matchingProducts" name="matchingProducts" placeholder="请输入搭配产品" class="layui-textarea"></textarea>
		</div>
	</div>

	<div class="layui-form-item" pane>
		<label class="layui-form-label">备注</label>
		<div class="layui-input-block">
            <textarea id="comment" name="comment" placeholder="请输入备注" class="layui-textarea"></textarea>
		</div>
	</div>

    <div class="layui-form-item" pane>
		<#--<div class="layui-upload">-->
            <input type="hidden" id="archivesFileId" name="fileId">
            <input type="hidden" id="archivesFileName" name="fileName">
            <button type="button" class="layui-btn" id="selectMultipleImg">选择图片</button>
            <button type="button" class="layui-btn layui-btn-danger" id="uploadMultiple">开始上传</button>
			<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
				预览图：
				<div class="layui-upload-list" id="archivesPreview">
                </div>
			</blockquote>
		<#--</div>-->
	</div>

	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit="" lay-filter="addSubmit" id="addSubmit">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</div>
</form>
</html>